import styles from './index.module.scss'
import { Icon } from 'vant'
const active = ref(0)
export default function Tabber() {
  const handleTabberChange = (e) => {
    active.value = Number(e.target.dataset.id)
    // if (e.target.dataset.id === active.value) {
    //   return
    // }
    // if (e.target.dataset.id === 0) {
    //   router.push('/')
    // }
    // if (e.target.dataset.id === 1) {
    //   router.push('/square')
    // }
    // if (e.target.dataset.id === 2) {
    //   router.push('/find')
    // }
    // if (e.target.dataset.id === 3) {
    //   router.push('/mine')
    // }
  }
  return (
    <div className={styles.tabbar} onClick={handleTabberChange}>
      <div className={`${styles.tabbarItem}`} data-id={0}>
        <Transition name="slide-fade">
          <div v-show={active.value !== 0}>首页</div>
          <div v-show={active.value === 0}>
            <Icon name="chat-o" />
          </div>
        </Transition>
      </div>
      <div className={`${styles.tabbarItem}`} data-id={1}>
        <Transition name="slide-fade">
          <div v-show={active.value !== 1}>广场</div>
          <div v-show={active.value === 1}>
            <Icon name="chat-o" />
          </div>
        </Transition>
      </div>
      <div className={`${styles.tabbarItem}`} data-id={2}>
        <Transition name="fade">
          <div v-show={active.value !== 2}>发现</div>
          <div v-show={active.value === 2}>
            <Icon name="chat-o" />
          </div>
        </Transition>
      </div>
      <div className={`${styles.tabbarItem}`} data-id={3}>
        <Transition name={styles.fade}>
          <div v-show={active.value !== 3}>我的</div>
          <div v-show={active.value === 3}>
            <Icon name="chat-o" />
          </div>
        </Transition>
      </div>
    </div>
  )
}
